<script setup lang="ts">
import { DonutChart } from "@/registry/new-york/ui/chart-donut"

const data = [
  {
    name: "Jan",
    total: Math.floor(Math.random() * 2000) + 500,
    predicted: Math.floor(Math.random() * 2000) + 500,
  },
  {
    name: "Feb",
    total: Math.floor(Math.random() * 2000) + 500,
    predicted: Math.floor(Math.random() * 2000) + 500,
  },
  {
    name: "Mar",
    total: Math.floor(Math.random() * 2000) + 500,
    predicted: Math.floor(Math.random() * 2000) + 500,
  },
  {
    name: "Apr",
    total: Math.floor(Math.random() * 2000) + 500,
    predicted: Math.floor(Math.random() * 2000) + 500,
  },
  {
    name: "May",
    total: Math.floor(Math.random() * 2000) + 500,
    predicted: Math.floor(Math.random() * 2000) + 500,
  },
  {
    name: "Jun",
    total: Math.floor(Math.random() * 2000) + 500,
    predicted: Math.floor(Math.random() * 2000) + 500,
  },
]

function valueFormatter(tick: number | Date) {
  return typeof tick === "number"
    ? `$ ${new Intl.NumberFormat("us").format(tick).toString()}`
    : ""
}
</script>

<template>
  <DonutChart
    index="name"
    :category="'total'"
    :data="data"
    :value-formatter="valueFormatter"
  />
</template>
